<template>
  <div class="comtop">
    <h1>智能运维管理平台</h1>
     <div class="right">
         <a class="icon icon-message" href="#"></a>
         <a class="icon icon-to-do" href="#"></a>
         <a class="icon icon-prompt" href="#"></a>
         <a class="avatar" href="#"><img src="../assets/Headportrait.png"/></a>
         <span>陈晓贰</span>
          <a style="margin-left:10px;color:#000" href="#">退出</a>
     </div>
  </div>
</template>

<script>
export default {
  name: "Top",
  data() {
    return {
      dialogAddForm: {
        name: "",
        ip: "",
        desc:""
      },};
  }
};
</script>

 
<style scoped lang="scss">
@each $i in Headportrait, message, prompt, to-do {
  .icon-#{$i} {
    background-image: url("../assets/#{$i}.png") !important;
  }
}

.comtop {
  height: 48px;
  line-height: 48px;
  background-image: linear-gradient(-180deg, #ffffff 2%, #ffffff 100%);
  border-radius: 0 0 4px 0 0;
  padding-right: 20px;
  h1 {
    font-family: PingFangSC-Semibold;
    font-size: 20px;
    color: #333333;
    padding-left: 20px;
    float: left;
    font-weight:normal;
  }
  .right {
    float: right;
    .icon {
      width: 15px;
      height: 15px;
      display: inline-block;
      margin-right: 20px;
      background: url() no-repeat center center;
      background-size: cover;
      vertical-align: middle;
    }
    .avatar {
      width: 42px;
      height: 32px;
      display: inline-block;
      vertical-align: middle;
      position: relative;
      padding-left: 10px;
      &::before {
        content: "";
        width: 1px;
        height: 23px;
        position: absolute;
        background: #000;
        top: 5px;
        left: 0px;
      }
    }
    span {
      margin-left: 10px;
      font-size: 12px;
      color: #000000;
      vertical-align: middle;
    }
  }
}
</style>
